<template>
  <div class="home">
    <el-container>
      <el-header>
        <el-row>
          <el-col :span="1">
            <img src="../assets/管理头_02.jpg" alt="" class="img" />
          </el-col>
          <el-col :span="22" style="font-size: 22px; padding-left: 15px"
            >电商后台管理系统</el-col
          >
          <el-col :span="1">
            <el-button type="info" @click="tc">退出</el-button>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside :width="isCollapse ? '65px' : '200px'">
          <el-menu
            :default-active="$route.path"
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            :collapse-transition="false"
            router
            unique-opened
            :collapse="isCollapse"
          >
            <header
              @click="isCollapse = !isCollapse"
              style="padding: 5px 0; text-align: center; color: #fff"
            >
              |||
            </header>
            <el-submenu
              :index="index + ''"
              v-for="(item, index) in zuolist"
              :key="index"
            >
              <template slot="title">
                <i :class="arr[index]"></i>
                <span>{{ item.authName }}</span>
              </template>
              <el-menu-item
                :index="'/' + ite.path"
                v-for="(ite, ind) in item.children"
                :key="ind"
              >
                <i class="el-icon-menu"></i>
                <span slot="title">{{ ite.authName }}</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main><router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { zuolist } from '@/http/api.js'
export default {
  name: 'home',
  data() {
    return {
      zuolist: [], //左侧列表数据
      isCollapse: false, //控制折叠的变量
      arr: [
        'el-icon-s-custom',
        'el-icon-menu',
        'el-icon-s-goods',
        'el-icon-s-order',
        'el-icon-s-data'
      ] //用于控制图标的数组
    }
  },
  created() {
    this.zlist()
  },
  methods: {
    // 退出功能
    tc() {
      this.$confirm('确定要退出吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          sessionStorage.removeItem('token')
          this.$router.push('/login')
          this.$message({
            type: 'success',
            message: '退出成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          })
        })
    },
    // 获取菜单栏数据
    async zlist() {
      const res = await zuolist()
      console.log(res)
      this.zuolist = res
    }
  }
}
</script>
<style lang="scss" scoped>
.el-container {
  width: 100%;
  height: 100%;
  .el-header {
    width: 100%;
    height: 60px;
    background-color: #373d41;
    color: #fff;
    line-height: 60px;
    .img {
      width: 60px;
      height: 60px;
    }
  }
  .el-aside {
    width: 100%;
    min-height: 660px;
    background-color: #333744;
    box-sizing: border-box;
    .el-menu {
      width: 100%;
      border-right: 0;
      height: 100%;
    }
  }
}
</style>
